<template>
	<el-dialog
		:visible.sync="evalDialog"
		width="800px"
		class="evalDialog">
		<h3 class="title"><span></span>岗位审核</h3>
		<div class="post-con">
			<h2 class="post-name">{{options.jobTitle}}</h2>
			<ul class="post-list">
				<li>
					<span>薪资：</span>
					{{options.salary}}
					<span v-if="options.status == '2'">
						<span v-if="options.hourlyState == '1'">(长期：每周{{options.workDays}}个工作日)</span>
						<span v-else class="work-days">(工作天数：{{options.workList.length}}
							<el-date-picker
								type="dates"
								v-model="options.workList" class="work-times"
								placeholder="选择一个或多个日期">
							</el-date-picker>
						)</span>
						
					</span>
				</li>
				<li><span>招聘人数：</span>{{options.recruitingNumbers}}</li>
				<li><span>年龄范围：</span>{{options.ageRange}}</li>
			</ul>
			<ul class="post-list">
				<li><span>学历要求：</span>{{options.educationalRequirements}}</li>
				<li><span>工作经验：</span>{{options.workExperience}}</li>
				<li><span>发布时间：</span>{{options.updateTime}}</li>
			</ul>
		</div>
		<div class="post-desc">
			<h3 class="desc-title">岗位描述</h3>
			<p class="desc-con">{{options.jobDescription}}</p>
		</div>
		<div class="post-desc">
			<h3 class="desc-title">任职要求</h3>
			<p class="desc-con">{{options.jobRequirements}}</p>
		</div>
		<div class="post-desc">
			<h3 class="desc-title">工作地点({{options.workAdress}})</h3>
			<comVueAMap :options="map"></comVueAMap>
		</div>
		<div class="post-desc">
			<h3 class="desc-title">能力要求</h3>
			<div class="desc-classify"><span class="classify-first">硬性项目</span><span>软性项目</span></div>
			<ul class="skill-list">
				<li class="list-tr clearfix">
					<span>评价认证</span>
					<span>一般</span>
					<span>良好</span>
					<span>优秀</span>
				</li>
				<li class="list-td clearfix"  v-for="(skill,index) in options.skillListPre" :key="index">
					<div class="td-label">{{skill.name}}</div>
					<div class="td-progress">
						<el-progress :percentage="skill.per" :show-text="false"></el-progress>
					</div>
				</li>
			</ul>
			<ul class="skill-list">
				<li class="list-tr clearfix">
					<span>评价认证</span>
					<span>一般</span>
					<span>良好</span>
					<span>优秀</span>
				</li>
				<li class="list-td clearfix"  v-for="(skill,index) in options.skillListNext" :key="index">
					<div class="td-label">{{skill.name}}</div>
					<div class="td-progress">
						<el-progress :percentage="skill.per" :show-text="false"></el-progress>
					</div>
				</li>
			</ul>
		</div>
		<template v-if="options.statusIndex == 0">
			<div class="post-examine" v-if="examineDag">
				<el-button type="danger" class="examine-dag" @click="examineDag = false">驳回</el-button>
				<el-button type="success" class="examine-suc" @click="subData">通过</el-button>
			</div>
			<div class="rejection" v-else>
				<h3 class="desc-title">驳回原因(必填)</h3>
				<el-input
				  type="textarea"
				  placeholder="请输入内容"
				  v-model="textarea" class="rej-text">
				</el-input>
				<div class="post-examine">
					<el-button class="examine-dag" @click="examineDag = true">取消</el-button>
					<el-button type="danger" class="examine-suc" @click="subData">提交</el-button>
				</div>
			</div>
		</template>
		<template v-else class="audit-record">
			<div class="post-desc" style="padding-bottom: 30px;">
				<h3 class="desc-title">审核记录</h3>
				<comTable :options="options.dataList"></comTable>
			</div>
		</template>
		
	</el-dialog>
</template>

<script>
	
export default{
	components:{
		comVueAMap: () => import('./comVueAMap.vue'),
		comTable: () => import('./comTable.vue')
	},
	props:{
		options:{
			type: Object,
			require: true
		},
		intentionJob:{
			type:String
		}
	},
	created(){
		this.map.zoom = this.options.zoom;
		console.log(this.options);
	},
	data(){
		return {
			evalDialog:false,
			map:{												//高德地图组件参数
				zoom:'',										//地图显示的缩放级别范围，取值范围[3-18]
				center:this.options.center,
				style:{											//地图组件的宽高
					width:'100%',								
					height:'500px'
				},
				circles:[										//覆盖圆的效果
					{
						center: this.options.center,		//圆中心坐标
						radius: 3000,							//圆半径
						fillOpacity: 0.1,						//圆的透明度
						events: {								//圆内的点击事件
							click: () => {
							  // alert('click');
							}
						}
					}
				],
				markers: [										//定位图标
					{											
						position: this.options.center,		//定位的坐标
					}
				],
			},
			examineDag:true,
			textarea:''
		}
	},
	methods:{
		open(){
			this.evalDialog = true;
		},
		close(){
			this.evalDialog = false;
		},
		//审核通过或者驳回
		subData(){
			/* 请求接口,提交数据 */
			let params = {
				positionid: this.options.userinfo.positionId,
				auditorName: this.options.userinfo.name,
				status: 5
			}
			if(this.examineDag == false){
				if(this.textarea == ''){
					this.$message({
						message: '请输入驳回理由',
						type: 'warning'
					})
					return false;
				}else{
					params.status = 1;
					params.operationCause = this.textarea;
				}
			}
			console.log(params);
			this.$houseAxios.post('/housekeeping/Record/insertAuditorRecordStatus',params).then(res => {
				console.log(res);
				if(res.data.code === 1000){
					this.$message({
						message: '操作成功！',
						type: 'success'
					})
					this.$emit('Refresh');
					this.textarea = '';
				}else{
					this.$message({
						message:res.data.message,
						type: 'warning'
					})
				}
			})
			
			this.close()
		}
	}
}
</script>
<style scoped="scoped">
.evalDialog{
	min-height: 700px;
}
.evalDialog .title{
	height: 60px;
	line-height: 60px;
	font-size: 15px;
	font-weight: bold;
	border-bottom: 1px solid #D2D2D2;
	padding: 0 0 0 30px;
}
.evalDialog .title span{
	width: 10px;height: 20px;
	float: left;background: #0064E4;
	margin: 20px 15px 0 0;
}
.post-con,.post-desc,.post-examine,.rejection{
	margin: 0 55px;overflow: hidden;
}
.post-name{
	margin-top: 30px;font-size: 16px;
	color: #000;
}
.post-list{
	float: left;width: 50%;
}
.post-list li{
	margin-top: 15px;color: #353535;
}
.post-list li span{
	color: #999999;
}
.post-list .work-days{
	position: relative;color: blue;
}
.post-list .work-times{
	position: absolute;top: 0;left: 0;width: 100px;height: 20px;opacity: 0;
}
.desc-title{
	margin-top: 25px;font-size: 13px;
	color: #000;font-weight: bold;
}
.desc-con{
	margin-top: 10px;color: #000;
	font-size: 12px;
}
.desc-classify{
	font-size: 12px;color: #333;
	margin-top: 10px;
}
.classify-first{
	display: inline-block;width: 45%;margin-right: 30px;
}
.skill-list{
	width: 45%;float: left;
	background-color: #F5F5F5;
	border-radius: 8px;
	padding: 5px 10px;
	margin: 10px 30px 30px 0;
	color: #000;
	font-size: 12px;
}
.list-tr span{
	float: left;width: 20%;
	line-height: 40px;
	text-align: center;
}
.list-tr span:first-child{
	margin-right: 40px;
}
.list-td{
	position: relative;
	height: 26px;
	line-height: 26px;
}
.list-td .td-label{
	position: absolute;
	left: 5px;top: 0;
	width: 100px;
}
.list-td .td-progress{
	width: 88%;
	padding: 10px 0 0 110px;
}
.post-examine .examine-dag,.post-examine .examine-suc{
	width: 150px;margin-bottom: 50px;
}
.examine-dag{
	margin-left: 160px;
}
.examine-suc{
	margin-left: 30px;
}
.rejection .desc-title,.rejection .post-examine{
	margin: 0;
}
.rejection .post-examine{
	margin-top: 40px;
}
</style>
